<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>跳蚤市场</title>


    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件，务必在bootstrap.min.js 之前引入，否则导致小屏幕点击不出现下拉框 ，版本过低也会-->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/market/css/main_css.css">
    <link rel="stylesheet" type="text/css" href="/market/css/products.css">



</head>

<body>

<%@include file="navbar.jsp"%>


<div class="row scroll-image-row"   >


        <div id="myCarousel" class="carousel slide" >
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner" style="height: 30%;">
                <div class="item active ">
                    <img class="big_img img-responsive" src="http://gw.alicdn.com/tps/i3/TB19zkLJXXXXXc3XFXXhXAC0FXX-640-247.jpg" alt="First slide">
                </div>
                <div class="item ">
                    <img class="big_img img-responsive" src="http://img.alicdn.com/tps/TB1Ntl6NpXXXXaIXpXXXXXXXXXX-640-270.jpg" alt="Second slide">
                </div>
                <div class="item ">
                    <img class="big_img img-responsive" src="http://gw.alicdn.com/tps/i3/TB19zkLJXXXXXc3XFXXhXAC0FXX-640-247.jpg" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->

            <a class="carousel-control left" href="#myCarousel"
               data-slide="prev">上一张</a>
            <a class="carousel-control right" href="#myCarousel"
               data-slide="next">下一张</a>
        </div>

</div>


<div class="container-fluid">
    <!-- 商品分类 -->
    <h1 class="page-header myfont" style="margin-left: 10px;">物品分类</h1>
    <div class="row">

        <div class="row  text-center">

            <!-- 如果图片出错，去掉img-responsive 加上width="200" height="200" -->
            <c:forEach items="${typeList}" var="type">

                <div class="col-xs-4 col-sm-2 " style="margin-top: 10px">

                    <a href="goods_type?typeId=${type.type_id}">
                        <img class=" img-rounded center-block " src="${type.type_img}"
                             class="img-responsive" alt="Generic placeholder thumbnail">
                    </a>

                    <h4 >${type.type_name}</h4>
                </div>

            </c:forEach>


        </div>
    </div>

    <!-- 商品展示 -->
    <h1 class="page-header myfont" style="margin-left: 10px;">商品展示</h1>

    <div class="row " >

        <c:forEach items="${goodsList}" var="goods">

            <div class="panel panel-default col-xs-5 col-sm-2 productItem"  >
                <div class="panel-body">

                    <div class="row" >
                        <a href="goods_details?goodsId=${goods.goods_id}">
                            <img alt="img_detail" src="${goods.goods_img}" class="  img-responsive"
                                 style="width: 190px; height: 190px;">
                        </a>
                        <p class="productPriceEm" >¥${goods.goods_price}</p>
                        <p class="productFont"><small>${goods.goods_name}</small></p>
                        <a href="Seller_Main?seller_id=${goods.user.userid}">${goods.user.nickname}</a>
                        <small style="margin-left: 10px">${goods.trade_place}</small>
                    </div>

                </div>
            </div>

        </c:forEach>
    </div>

</div>

<script type="text/javascript">
    //自动播放
    $("#myCarousel").carousel({
        interval :3000,
    });

</script>
</body>
</html>
